<template>
	<view class="home">
		<!-- <view class="home-navs"> -->
			<HomeNavBar @itemClicks="itemClicks" :class="currentIndex == 1 ? 'colorActive' : ''"></HomeNavBar>
		<!-- </view> -->
		<view v-if="currentIndex == 0" class="recommends">
			<view class="banner">
				<swiper class="swiper" indicator-active-color="#fff" :circular="true" :indicator-dots="indicatorDots" :autoplay="autoplay"
				 :interval="interval" :duration="duration">
					<swiper-item v-for="item in bannerList" :key="item.id">
						<image :src="item.img_url"></image>
					</swiper-item>
				</swiper>
			</view>
			<floorcontrol class="floors">
				<view class="left" slot="left">品类推荐</view>
				<view class="right" slot="right">
					<view>更多</view>
					<view class="icon">
						<image src="@/static/icons/arr-r-1.png" mode=""></image>
					</view>
				</view>
			</floorcontrol>
			<view class="series">
				<view @tap="foundClick(item)" class="items" v-for="item in seriesList" :key="item.id">
					<view class="imgs">
						<image :src="item.cover_img" mode=""></image>
					</view>
					<view class="cname">{{item.cname}}</view>
					<view class="ename">{{item.ename}}</view>
				</view>
			</view>
			<floorcontrol class="floors">
				<view class="left" slot="left">特色优选</view>
				<view class="right" slot="right">
					<view>更多</view>
					<view class="icon">
						<image src="@/static/icons/arr-r-1.png" mode=""></image>
					</view>
				</view>
			</floorcontrol>
			<view class="hot-list">
				<swiper class="swiper" previous-margin="80rpx" next-margin="40rpx" :autoplay="false" :interval="interval" :duration="duration">
					<swiper-item v-for="item in hotList" :key="item.id">
						<view class="hotlist-main">
							<image :src="item.cover_img" mode=""></image>
							<view class="card">
								<view class="card-main">
									<view class="title">{{item.gname}}</view>
									<view class="desrc">{{item.descr}}</view>
									<view class="colors-main" >
										<view class="colors" v-for="(items, index) in item.colors" :key="index" :style="{'backgroundColor': items}"></view>
									</view>
									<view class="detail_desc">{{item.detail_desc}}</view>
								</view>
			
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view v-else class="brand-list">
			<view class="brand-list-item" v-for="item in brandList" :key="item.id">
				<view class="imgs">
					<image :src="item.coverImg" mode=""></image>
				</view>
				<view class="texts">
					<view class="cname">
						{{item.cname}}
					</view>
					<view class="descr">
						{{item.descr}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getHomeBanner,
		getHomeSeries,
		getHomeHot,
		getBrandList
	} from '@/network/home/home.js';
	import HomeNavBar from "./children/HomeNavBar.vue";
	import floorcontrol from "@/components/floorcontrol/floorcontrol.vue"
	export default {
		data() {
			return {
				bannerList: [],
				seriesList: [],
				hotList: [],
				brandList: [],
				currentIndex: 0,
				indicatorDots: true, // 指示板是否显示下小点
				autoplay: true,
				interval: 2000,
				duration: 500
			};
		},
		components: {
			HomeNavBar,
			floorcontrol
		},
		onLoad() {
			this.getHomeBanners();
			this.getHomeSeriess();
			this.getHomeHots()
			this.getBrandLists()
		},
		computed: {
		},
		methods: {
			foundClick(item) {
				let index = this.seriesList.findIndex(items => items.id == item.id)
				console.log(index)
				let id = this.seriesList[index].id
				console.log(id)
				uni.switchTab({
					// url: '/pages/found/found?iid=' + id
					url: `/pages/found/found?iid=${id}`
				})
			},
			itemClicks(index) {
				console.log(index, '索引值')
				this.currentIndex = index
			},
			getHomeBanners() {
				getHomeBanner({
					use: 0
				}).then(res => {
					console.log(res)
					this.bannerList = res.data.data
				})
			},
			getHomeSeriess() {
				console.log(22)
				getHomeSeries().then(res => {
					console.log(res)
					this.seriesList = res.data.data
				})
			},
			getHomeHots() {
				getHomeHot().then(res => {
					console.log(res)
					this.hotList = res.data.data
				})
			},
			async	getBrandLists() {
				// console.log(12)
				const res = await getBrandList();
				console.log(res)
				this.brandList = res.data.data
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		background-color: #F1ECE7;
		color: #3e3e3e;
		height: 100vh;
		overflow: auto;
	}
	.brand-list {
		margin-top: 98rpx;
		padding: 20rpx 40rpx;
		.brand-list-item {
			position: relative;
			background-color: #fff;
			padding-bottom: 186rpx;
			margin-bottom: 56rpx;
			overflow: hidden;
			.imgs {
				width: 670rpx;
				height: 426rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.texts {
				position: absolute;
				bottom: 0;
				left: 40rpx;
				overflow: hidden;
				.cname {
					margin-bottom: 10rpx;
				}
				.descr {
					
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					font-size: 28rpx;
					color: #B1B1B8;
				}
			}
		}
	}
	.hot-list {
		margin-bottom: 20rpx;
		uni-swiper-item {

			// margin: 20px 0;
			// height: 280rpx;
			.hotlist-main {
				position: relative;

				image {
					position: absolute;
					left: 44rpx;
					z-index: 9999999999999999999999;
					bottom: 34rpx;
					width: 194rpx;
					height: 280rpx;
				}

				.card {
					height: 130px;
					width: 295px;
					margin-top: 20px;
					background-color: #fff;
					box-shadow: 0 16rpx 48rpx 0 rgba(122, 98, 75, 0.12);
					border-radius: 20rpx;

					.card-main {
						margin-left: 280rpx;
						.colors-main {
							display: flex;
						}
						.colors {
							width: 16rpx;
							height: 16rpx;
							border-radius: 50%;
							background-color: #fff;
							margin-right: 10rpx;
						}
					}
				}
			}

		}

		// .hotlist-main {

		// }
	}

	.series {
		display: flex;
		justify-content: space-around;
		text-align: center;

		.imgs {
			width: 208rpx;
			height: 176rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.cname {
			margin-top: 40rpx;
			font-size: 26rpx;
			font-weight: bolder;
		}

		.ename {
			font-size: 20rpx;
			color: #b0b0b0;
		}
	}

	.floors {
		padding: 0 30rpx;

		.left {
			font-size: 32rpx;
			color: #3e3e3e;
			font-weight: bold;
		}

		.right {
			display: flex;
			align-items: center;
			font-size: 26rpx;
			color: #8c8c8c;

			.icon {
				width: 30rpx;
				height: 30rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.banner {
		height: 470rpx;

		// uni-swiper {
		// 	height: 100%;
		// 	width: 100vw;
		// 	image {
		// 		width: 100vw;
		// 		height: 100%;
		// 	}
		// }
		swiper {
			height: 100%;
			swiper-item {
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		

	}
	.colorActive {
		background-color: #354E44;
	}
</style>
